.service-com-wrap {
    padding: 0 24px;
    margin-bottom: 24px;
    .item-card-wrap {
        display: inline-block;
        vertical-align: top;
        margin-top: 24px;
        margin-right: 24px;
        width: calc((100% - 24px * 2) / 3);
        padding: 24px;
        background:rgba(255,255,255,1);
        
        border-radius: 4px;
        border: 1px solid transparent;
        &:hover {
            border: 1px solid @primary-color;
            box-shadow: 0px 6px 18px 0px rgba(20,30,44,0.1);
        }
        &:focus {
            border: 1px solid @primary-color;
            box-shadow: 0px 6px 18px 0px rgba(20,30,44,0.1);
        }
        
        cursor: pointer;
        &.my-service {
            height: 176px;
        }
        &.service-center {
            height: 232px;
        }
        .header {
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(23,30,45,1);
            line-height: 22px;
            .edition {
                margin-left: 8px;
                padding: 2px 6px;
                background: rgba(0,0,0,0.04);
                border-radius: 1px;
                font-size: 12px;
                color: rgba(23,30,45,0.65);
            }
            .tooltip-wrap {
                position: relative;
                .ant-tooltip {
                    top: -35px !important;
                    left: 0px !important;
                    max-width: 500px;
                    .ant-tooltip-content {
                        .ant-tooltip-inner {
                            padding: 5px 12px;
                            height:22px;
                            line-height: 22px;
                            font-size:12px;
                            font-family:PingFangSC-Regular,PingFang SC;
                            font-weight:400;
                            white-space: nowrap;
                            color:rgba(255,255,255,1);
                            background: rgba(0,0,0,0.8);
                            box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.2);
                        }
                    }
                }
            }
            
        }
        .symbol-flag {
            margin: 12px 0;
            .symbol {
            
                font-size: 12px;
                color: rgba(23,30,45,0.65);
                padding: 6px;
                height: 22px;
                line-height: 22px;
                background: rgba(64,158,255,0.15);
                border-radius: 1px;
            }
        }
        .desc {
            height: 60px;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            /* autoprefixer: off */
            -webkit-box-orient: vertical;
            /* autoprefixer: on */
            font-size: 12px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(23,30,45,0.45);
            line-height: 20px;
            
        }
        .btn {
            margin-top: 24px;
        }
        &:nth-child(3n+3) {
            margin-right: 0;
        }
        
    }
    .no-service-data {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 80px;
        .no_data_img {
            width: 230px;
            height: 284px;
        }
        .text {
            margin: 31px 0 24px 0;
            height: 20px;
            font-size: 12px;
            font-family: PingFangSC-Regular,PingFang SC;
            font-weight: 400;
            color: rgba(23,30,45,0.45);
            line-height: 20px;
        }
        .no_data_btn {
            width: 200px;
            // height: 40px;
            cursor: pointer;
        }
    }
}